{% extends "base.html" %}
{% block title %}
    员工列表
{% endblock %}
{% block main %}
    <div class="col-12">
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title">员工列表</h3>
            </div>
            <div class="card-tools ml-3 mt-2">
                <a href="/employee_add" class="btn btn-primary" style="color: white">创建员工</a>
                <a href="{% url 'export_employees_csv' %}" class="btn btn-success">导出员工数据</a>
            </div>
            <div class="card-body">
                <table id="example1" class="table table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>员工编号</th>
                        <th>员工姓名</th>
                        <th>员工级别</th>
                        <th>员工电话</th>
                        <th>员工工资</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for employee in employees %}
                        <tr>
                            <td>{{ employee.Eid }}</td>
                            <td>{{ employee.EName }}</td>
                            <td>{{ employee.Elevel }}</td>
                            <td>{{ employee.EtelPhone }}</td>
                            <td>{{ employee.ESalary }}</td>
                            <td>{{ employee.other }}</td>
                            <td>
                                <a href="/employee_find_by_id?id={{ employee.Eid }}" class="btn btn-success">修改</a>
                                <button class="btn btn-danger btn-sm" onclick="deleteEmployee('{{ employee.Eid }}')">
                                    删除
                                </button>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
        $(document).ready(function () {
            $("#example1").DataTable({
                "language": {"url": "/static/plugins/datatables/Chinese.json"},
                "responsive": true,
                "autoWidth": false,
            });
        })

        function deleteEmployee(employeeId) {
            const confirmed = confirm('确定要删除该员工吗？');
            if (confirmed) {
                $.ajax({
                    url: '/employee_delete/' + employeeId,
                    type: 'DELETE',
                    success: function (res) {
                        if (res.code === 200) {
                            alert('删除成功');
                            location.reload();
                        } else {
                            alert('删除失败');
                        }
                    }
                });
            }
        }
    </script>
{% endblock %}
